import {
  View,
  Text,
  SafeAreaView,
  StyleSheet,
  ScrollView,
  Image,
  Pressable,
} from "react-native";

import React, { useEffect, useState } from "react";
import Icon from "react-native-vector-icons/Ionicons";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";

import { getUserInfoApi } from "../../../api/user";
import { User } from "./MyTypes";
import { BASE_URL } from "../../../config";

type Props = {
  navigation: NativeStackNavigationProp<any>;
};

export default function My({ navigation }: Props) {
  const [user, setUser] = useState<User | null>();

  useEffect(() => {
    getUser();
  }, []);

  // 获取用户信息
  async function getUser() {
    console.warn("获取用户信息");
    const res = await getUserInfoApi<User>();
    if (res.code == 200) {
      console.log(res.data);
      setUser(res.data);
    }
  }

  // 跳转到发布页面
  async function gotoPublicPage() {
    navigation.navigate("DynamicPublic");
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.top}>
        <Icon style={styles.icon} name="scan-outline" size={24} color="#333" />
        <Icon
          style={styles.icon}
          name="notifications-outline"
          size={24}
          color="#333"
        />
        <Icon
          style={styles.icon}
          name="settings-outline"
          size={24}
          color="#333"
        />
      </View>
      <ScrollView style={styles.scrollView}>
        <View style={styles.info}>
          <View style={styles.cover}>
            <Pressable
              onPress={() => {
                navigation.navigate("UserDetail");
              }}
            >
              <Image
                style={styles.cover}
                source={{
                  uri: BASE_URL + user?.avatar,
                }}
              ></Image>
            </Pressable>
          </View>
          <View style={styles.middle}>
            <Text style={styles.name}>{user?.name}</Text>
            <Text numberOfLines={1} style={styles.medal}>
              {user?.desc}
            </Text>
          </View>
        </View>
        <View style={styles.status}>
          <View style={styles.tabberItem}>
            <Text style={styles.tabberNumber}>0</Text>
            <Text style={styles.statusText}>我的</Text>
          </View>
          <View style={styles.tabberItem}>
            <Text style={styles.tabberNumber}>0</Text>
            <Text style={styles.statusText}>收藏</Text>
          </View>
          <View style={styles.tabberItem}>
            <Text style={styles.tabberNumber}>0</Text>
            <Text style={styles.statusText}>关注</Text>
          </View>
          <View style={styles.tabberItem}>
            <Text style={styles.tabberNumber}>0</Text>
            <Text style={styles.statusText}>粉丝</Text>
          </View>
        </View>
        <View style={styles.tabber}>
          <View style={styles.tabberItem}>
            <Icon
              style={styles.tabberIcon}
              name="reader-outline"
              size={26}
              color="#333"
            />
            <Text style={styles.tabberText}>订单</Text>
          </View>
          <View style={styles.tabberItem}>
            <Icon
              style={styles.tabberIcon}
              name="trophy-outline"
              size={26}
              color="#333"
            />
            <Text style={styles.tabberText}>活动</Text>
          </View>
          <View style={styles.tabberItem}>
            <Icon
              style={styles.tabberIcon}
              name="ribbon-outline"
              size={26}
              color="#333"
            />
            <Text style={styles.tabberText}>积分</Text>
          </View>
          <View style={styles.tabberItem}>
            <Icon
              style={styles.tabberIcon}
              name="hourglass-outline"
              size={26}
              color="#333"
            />
            <Text style={styles.tabberText}>记录</Text>
          </View>
        </View>
        <View style={styles.setting}>
          <Pressable onPress={gotoPublicPage} style={styles.settingItem}>
            <Text style={styles.settingText}>发布</Text>
            <Icon name="chevron-forward-outline" size={20} color="#999" />
          </Pressable>
          <View style={styles.settingItem}>
            <Text style={styles.settingText}>账号与安全</Text>
            <Icon name="chevron-forward-outline" size={20} color="#999" />
          </View>
          <View style={styles.settingItem}>
            <Text style={styles.settingText}>新人招募计划</Text>
            <Icon name="chevron-forward-outline" size={20} color="#999" />
          </View>
          <View style={styles.settingItem}>
            <Text style={styles.settingText}>收货地址</Text>
            <Icon name="chevron-forward-outline" size={20} color="#999" />
          </View>
          <View style={styles.settingItem}>
            <Text style={styles.settingText}>青少年模式</Text>
            <Icon name="chevron-forward-outline" size={20} color="#999" />
          </View>
          <View style={styles.settingItem}>
            <Text style={styles.settingText}>我的客服</Text>
            <Icon name="chevron-forward-outline" size={20} color="#999" />
          </View>
          <View style={styles.settingItem}>
            <Text style={styles.settingText}>意见反馈</Text>
            <Icon name="chevron-forward-outline" size={20} color="#999" />
          </View>
          <View style={styles.settingItem}>
            <Text style={styles.settingText}>设置</Text>
            <Icon name="chevron-forward-outline" size={20} color="#999" />
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f8f8f8",
  },
  top: {
    flexDirection: "row",
    justifyContent: "flex-end",
    alignItems: "center",
    padding: 10,
  },
  icon: {
    marginLeft: 14,
  },
  scrollView: {
    flex: 1,
    // backgroundColor: 'pink',
  },
  info: {
    flexDirection: "row",
    padding: 20,
    paddingTop: 10,
  },
  cover: {
    width: 64,
    height: 64,
    borderRadius: 100,
    marginRight: 20,
  },
  middle: {
    flex: 1,
    justifyContent: "space-around",
  },
  name: {
    fontSize: 20,
    // fontWeight:'bold'
  },
  medal: {
    fontSize: 14,
    color: "#666",
  },
  status: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    marginLeft: 10,
    marginRight: 10,
    paddingTop: 14,
    paddingBottom: 14,
    marginBottom: 10,
  },
  tabber: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    backgroundColor: "#fff",
    marginLeft: 10,
    marginRight: 10,
    borderRadius: 10,
    shadowColor: "#000",
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity: 0.08,
    shadowRadius: 10,
    paddingTop: 14,
    paddingBottom: 14,
  },
  tabberItem: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  tabberNumber: {
    fontSize: 20,
    color: "#333",
    // paddingTop:10,
    paddingBottom: 5,
  },
  tabberText: {
    fontSize: 14,
    color: "#333",
  },
  statusText: {
    fontSize: 14,
    color: "#666",
  },
  tabberIcon: {
    paddingBottom: 4,
    paddingTop: 4,
  },
  setting: {
    backgroundColor: "#fff",
    marginLeft: 10,
    marginRight: 10,
    marginTop: 10,
    marginBottom: 20,
    borderRadius: 10,
    shadowColor: "#000",
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity: 0.08,
    shadowRadius: 10,
    paddingLeft: 24,
    paddingRight: 24,
    padding: 10,
  },
  settingItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingTop: 20,
    paddingBottom: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#f8f8f8",
  },
  settingText: {
    fontSize: 16,
    color: "#000",
    flex: 1,
  },
});
